<template>
    <el-menu
            class="el-menu-vertical-demo"
    >
        <el-menu-item class="menu-sub" @click="go2Home">
            <el-icon><Menu/></el-icon>
            系统介绍
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2PatientTeethList" v-if="is_login_patient">
            <el-icon><Histogram/></el-icon>
            我的牙齿模型
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2DentistTeethList" v-if="is_login_dentist">
            <el-icon><Histogram/></el-icon>
            管理牙齿模型
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2PatientTreatment" v-if="is_login_patient">
            <el-icon><Flag/></el-icon>
            我的疗程
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2DentistTreatment" v-if="is_login_dentist">
            <el-icon><Flag/></el-icon>
            管理疗程
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2EstimateTeeth" v-if="is_login_dentist">
            <el-icon><Platform/></el-icon>
            牙齿评估
        </el-menu-item>
        <el-menu-item class="menu-sub" @click="go2Profile" v-if="is_login">
            <el-icon><UserFilled/></el-icon>
            我的个人信息
        </el-menu-item>
    </el-menu>
</template>

<script>

import {
    Histogram,
    UserFilled,
    Menu,
    Flag,
    Platform
} from '@element-plus/icons-vue'

export default {
    name: "SideMenu",
    components: {
        Histogram,
        UserFilled,
        Menu,
        Flag,
        Platform
    },
    methods: {
        go2Profile: function () {
            this.$router.replace('/profile')
        },
        go2Home: function () {
            this.$router.replace('/')
        },
        go2PatientTeethList: function () {
            this.$router.replace('/patientteethlist')
        },
        go2PatientTreatment: function () {
            this.$router.replace('/patienttreatment')
        },
        go2DentistTeethList: function () {
            this.$router.replace('/dentistteethlist')
        },
        go2DentistTreatment: function () {
            this.$router.replace('/dentisttreatment')
        },
        go2EstimateTeeth: function () {
            this.$router.replace('/estimateteeth')
        }
    },
    computed: {
        is_login: function () {
            return this.$store.state.is_login
        },
        is_login_patient: function () {
            return this.$store.state.is_login_patient
        },
        is_login_dentist: function () {
            return this.$store.state.is_login_dentist
        }
    }
}
</script>

<style scoped>
.el-menu {
    width: 100%;
    margin-top: 10px;
    background: ghostwhite;
}
.el-menu-item {
    width: 100%;
}
.menu-sub {
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 20px;
}
</style>